在此專案練習使用function的方式建立元件，因此在子元件使用Hook中的useContext，來從父元件中宣告好的共用states - context中獲取資料吧！

在上一篇文章中，已在父元件App中宣告好名為 ContextState 的共用資料了
前往複習全部程式碼

父元件App.js(省略部分程式碼)

//引入context
import { ContextState } from './context/ContextState.js'

//設定要傳入context的資料
const setValue = {
    titleContext: "我在App元件將這段文字設成共用", colorContext: 'blue'
  }

//jsx模板中宣告並用value傳入資料，讓下層子元件Child都能使用context
	<ContextState.Provide value={setValue}>
        <Child />
	</ContextState.Provide>

第一層子元件Child.js中不使用Context的資料，也不傳入任何props給第二層子元件Grandson.js

Child.js

import React from 'react';
import './Child.css'
import Grandson from './Grandson'

function Child() {

    return (
        <div className="App child-wrap" >
            <h4>Child元件用不到context</h4>
            <Grandson />
        </div>)

}

export default Child;

在二層子元件 Grandson.js 利用 useContext 取得在 App.js 宣告的共用states - ContextState

• 第一步：引入Hook的useContext和Context設定檔
• 第二步：使用宣告變數接收用useContext()回傳的context資料，參數放上要使用的context名稱（記得要在元件function宣告）
• 第三步：開始使用共同State吧！

Grandson.js

//引入useContext
//引入我的共用資料設定檔js檔-contextState 
import React, { useContext } from 'react';
import { ContextState } from '../context/ContextState'

function Grandson() {

//用useContext(ContextState)函式回傳在App.js元件中傳入的value
//{titleContext: "我在App元件將這段設成共用", colorContext: 'blue'}
//給getContext
    const getContext = useContext(ContextState)

//使用getContext回傳的物件格式資料獲得裡面的值吧
    const styleColor = { color: getContext.colorContext }

    return (
        <div className="App grandson-wrap" >
            Grandson元件使用Context
            <br />
            <div style={styleColor}>{getContext.titleContext}</div>

        </div >)

}

export default Grandson;

最底層的 Grandson 元件不用麻煩 Child 元件用props傳送資料，
就可以使用 App元件中的 setValue 物件資料了！

最後要注意，Context的資料要用在不會經常變動的資訊。
因為當Context資料變動後會造成 最上層根元件 跟 所有使用到Context的元件 被重新渲染，
這會帶給整個專案模組帶來十分大的渲染成本，影響效能。